<!DOCTYPE html>
<html>
<head>
	<meta content="text/html;charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta http-equiv ="Pragma" content = "no-cache"/>
	<meta http-equiv="Cache-Control" content="no cache" />
	<meta http-equiv="Expires" content="0" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="format-detection" content="telephone=no"/>
	<link href="/plugins/pace/themes/pink/pace-theme-flash.css" rel="stylesheet"/>
	<link rel="stylesheet" href="/plugins/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/plugins/fileupload/jquery.fileupload.css" media="all"/>
	<script type="text/javascript" src="/plugins/pace/pace.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/plugins/layui/css/layui.css" media="all"/>
	<script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="/plugins/bootstrap/bootstrap.min.js"></script>
	<script src="/plugins/fileupload/load-image.all.min.js"></script>
	<script src="/plugins/fileupload/canvas-to-blob.min.js"></script>
	<script type="text/javascript" src="/plugins/fileupload/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="/plugins/fileupload/jquery.iframe-transport.js"></script>
	<script type="text/javascript" src="/plugins/fileupload/jquery.fileupload.js"></script>
	<script type="text/javascript" src="/plugins/fileupload/jquery.fileupload-process.js"></script>
	<script type="text/javascript" src="/plugins/fileupload/jquery.fileupload-image.js"></script>
	<script type="text/javascript" src="/plugins/fileupload/jquery.fileupload-audio.js"></script>
	<script type="text/javascript" src="/plugins/fileupload/jquery.fileupload-video.js"></script>
	<script type="text/javascript" src="/plugins/fileupload/jquery.fileupload-validate.js"></script>
	<script type="text/javascript" src="/plugins/layui/layui.js"></script>
	<script type="text/javascript" src="/plugins/toastr/toastr.min.js"></script>
	<script type="text/javascript" src="/plugins/frame/js/fs.js?v=2.0.0"></script>

<style type="text/css">
.pace .pace-progress {
  background: #1E92FB; /*进度条颜色*/
  height: 3px;
}
.pace .pace-progress-inner {
  box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
}
.pace .pace-activity {
  border-top-color: #1E92FB;    /*上边框颜色*/
  border-left-color: #1E92FB;    /*左边框颜色*/
}
</style>

</head>
<body class="layui-layout-body">
	<div class="" style="margin:20px;">
    	<!-- The fileinput-button span is used to style the file input field as button -->
	    <span class="btn btn-success fileinput-button">
	        <i class="glyphicon glyphicon-plus"></i>
	        <span>选择文件</span>
	        <input id="fileupload" type="file" name="file">
	    </span>
	    <br>
	    <br>
	    <!-- The global progress bar -->
	    <div id="progress" class="progress" style="height: 28px;">
	        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
	    </div>
    </div>

<script type="text/javascript">

layui.use(['layer','fsConfig','fsCommon'], function(){
  var fsConfig = layui.fsConfig,
  layer = layui.layer,
  fsCommon = layui.fsCommon,
  statusName = $.result(fsConfig,"global.result.statusName","errorNo"),
  msgName = $.result(fsConfig,"global.result.msgName","errorInfo"),
  successNo = $.result(fsConfig,"global.result.successNo","0"),
  uploadUrl = $.result(fsConfig,"global.uploadUrl","");

  var uploadFileList = top.$('meta[name="uploadFileList"]');
  if(uploadFileList.length==0)
  {
	top.$('head').append("<meta name=\"uploadFileList\" content=\"\"/>");
  }else{
 	uploadFileList.attr("content","");
  }

  //获取参数
  var paramUrl = fsCommon.getUrlParam();
  var fileAccept,fileExts,fileSize,isMultiple;

  var maxNumber = 1;

  //获取业务参数绑定
  if(!$.isEmpty(paramUrl["fileParam"])){
  	var fileParam = JSON.parse(unescape(paramUrl["fileParam"]));
  	fileAccept = fileParam["fileAccept"];
  	fileExts = fileParam["fileExts"];
  	fileSize = fileParam["fileSize"];
  	isMultiple = fileParam["isMultiple"];
  }

  if(isMultiple=="1"){//多文件上传

    $("#fileupload").attr("multiple","multiple");
  	var xx = fileParam["maxNumber"];
  	if(!$.isEmpty(xx)){
  		maxNumber = parseInt(xx);
  	}else{
  		maxNumber = 5;//默认5
  	}
  }

  var acceptFileTypes;
  if(fileAccept == "images"){//图片
  	acceptFileTypes = /(\.|\/)(gif|jpe?g|png)$/i;
  	$("#fileupload").attr("accept","image/*");
  }else if(fileAccept == "video"){//视频
  	acceptFileTypes = /(\.|\/)(avi|mp4|wma|rmvb|rm|flash|3gp|flv)$/i;
  	$("#fileupload").attr("accept","video/*");
  }else if(fileAccept == "audio"){//音频
  	acceptFileTypes = /(\.|\/)(mp3|wav|mid)$/i;
  	$("#fileupload").attr("accept","audio/*");
  }else if(!$.isEmpty(fileExts)){
  	acceptFileTypes = new RegExp("(\.|\/)("+fileExts+")$",'i');

  	var fileExtss = fileExts.split("|");
  	var str = "";
  	for(var i=0;i < fileExtss.length;i++){
  		if(!$.isEmpty(fileExtss[i])){

  			if(!$.isEmpty(str)){
  				str += ",";
  			}
  			str += "."+fileExtss[i];
  		}
  	}
  	$("#fileupload").attr("accept",str);
  }

  var maxFileSize;

  if(!$.isEmpty(fileSize)){
  	try
	{
	  maxFileSize = parseInt(fileSize) * 1024;
	}
	catch(err)
    {
      //默认100M
      maxFileSize = 100 * 1024 * 1024;
    }
  }else{
  	maxFileSize = 100 * 1024 * 1024;
  }

  var fileName="";//文件名称

  $('#fileupload').fileupload({
      url: uploadUrl,
      dataType: 'json',
      acceptFileTypes: acceptFileTypes,
      singleFileUploads: false, //多个文件一次性上传
      maxFileSize: maxFileSize,//文件最大
      maxNumberOfFiles :maxNumber,//最大上传文件数目
      messages : {
      	maxFileSize: '文件超过最大允许大小'+renderSize(maxFileSize),
      	acceptFileTypes: '文件类型不匹配',
      	maxNumberOfFiles:'超出最大文件上传数量'+maxNumber
      },
      done: function (e, data) {

      	var result = data.result;
      	if(result[statusName] != successNo){
			var filters = fsConfig["filters"];
		   	if(!$.isEmpty(filters)){
	     	  var otherFunction = filters[result[statusName]];
	      	  if($.isFunction(otherFunction)){
	       	     otherFunction(result);
	      	      return;
	     	   }
		    }
		    //错误进度条
		    $('#progress .progress-bar').removeClass("bg-success").addClass("bg-danger").html("");

		    $("#fileupload").removeAttr("disabled");
	   		fsCommon.errorMsg(result[msgName],0);
	   		return;
		}

		$('#progress .progress-bar').addClass("bg-success");

			//上传成功后，返回文件路径
			var fileList = $.result(result,$.result(fsConfig,"global.result.dataName"));
			top.$('meta[name="uploadFileList"]').attr("content",JSON.stringify(fileList));

		//关闭
		var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
		parent.layer.close(index);
      },
      progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').removeClass("bg-danger bg-success").css(
            'width',
            progress + '%'
        ).attr("aria-valuenow",progress).html(progress + '%');
      },processfail : function(e, data){
      	var currentFile = data.files[data.index];
	    if (data.files.error && currentFile.error) {
	        fsCommon.errorMsg(currentFile.error,0);
	    }
	    $("#fileupload").removeAttr("disabled");
      }
  }).on('fileuploadadd', function (e, data) {
  	//添加完成后触发的事件
  	//禁用选择
  	/* if(isMultiple!="1"){//单文件上传
	  	fileName = data.files[0].name;
  	} */
  	$("#fileupload").prop('disabled', true);

  }).prop('disabled', !$.support.fileInput)
      .parent().addClass($.support.fileInput ? undefined : 'disabled');

  //  格式化文件大小
	function renderSize(value){
	    if(null==value||value==''){
	        return "0 Bytes";
	    }
	    var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");
	    var index=0,
	        srcsize = parseFloat(value);
	 index=Math.floor(Math.log(srcsize)/Math.log(1024));
	    var size =srcsize/Math.pow(1024,index);
	    //  保留的小数位数
	    size=size.toFixed(2);
	    return size+unitArr[index];
	}

});

</script>
</body>
</html>
